<template>
  <div class="student">
    <h1>{{ msg }}</h1>
    <h2>学生姓名: {{ name }}</h2>
    <h2>学生性别: {{ gender }}</h2>
    <h2>学生年龄: {{ MyAge + 1 }}</h2>
    <button @click="updateAge">常试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  name: "student-name",
  data() {
    return {
      msg: "我是一名学生",
      MyAge: this.age,
    };
  },
  methods: {
    updateAge() {
      console.log(this);
      this.MyAge++;
    },
  },
  // 第一种方式, 简单声明接收
  props: ["name", "gender", "age"],

  // 第二种方式, 接收的同时对数据进行类型限制
  // props: {
  //   name: String,
  //   gender: String,
  //   age: Number
  // }

  // 第三种方式, 接收的同时对数据: 进行类型限制 + 默认值的指定 + 必要性的限制
  props: {
    name: {
      type: String,       // name 的类型是字符串
      required: true      // name 是必填的
    },
    gender: {
      type: String,       // gender 的类型是字符串
      required: true      // gender 是必填的
    },
    age: {
      type: Number,       // age 的类型是数值
      default: 99         // age 的默认值
    },
  }
};
</script>

<style scoped>
.student {
  background-color: gray;
}
</style>
